<template>
  <div class="labor-week">

    <!-- 搜索区域 -->
    <div class="search-area single-line">
      <el-input
          v-model="searchQuery"
          placeholder="活动名称"
          clearable
          @clear="handleSearch"
          @keyup.enter="handleSearch"
          class="search-input"
      />

      <el-select
          v-model="filterBase"
          placeholder="全部基地"
          clearable
          @change="handleSearch"
          class="base-select"
      >
        <el-option
            v-for="base in uniqueBases"
            :key="base"
            :label="base"
            :value="base"
        />
      </el-select>

      <el-select
          v-model="filterFee"
          placeholder="收费类型"
          clearable
          @change="handleSearch"
          class="fee-select"
      >
        <el-option label="全部" value="" />
        <el-option label="免费" value="free" />
        <el-option label="收费" value="paid" />
      </el-select>

      <el-button
          type="primary"
          @click="handleSearch"
          class="search-btn"
      >
        <el-icon><Search /></el-icon>
        搜索
      </el-button>
    </div>

    <!-- 活动列表 -->
    <div class="activity-list">
      <div
          v-for="(activity, index) in paginatedActivities"
          :key="index"
          class="activity-item"
      >
        <!-- 左侧图片 -->
        <div class="activity-image">
          <el-image
              :src="activity.image"
              fit="cover"
              class="image-content"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
              </div>
            </template>
          </el-image>
        </div>

        <!-- 中间内容 -->
        <div class="activity-content">
          <h3 class="activity-title">{{ activity.title }}</h3>

          <div class="activity-details">
            <div class="detail-item">
              <span class="detail-label">基地：</span>
              <span>{{ activity.base }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">地址：</span>
              <span>{{ activity.address }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">活动时间：</span>
              <span>{{ formatDateTime(activity.activityTime) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">预约截止：</span>
              <span>{{ formatDateTime(activity.deadline) }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">预约对象：</span>
              <span>{{ activity.target }}</span>
            </div>
            <div class="detail-item">
              <span class="detail-label">是否收费：</span>
              <span :class="{ 'free': !activity.isPaid }">
                {{ activity.isPaid ? '¥' + activity.fee : '免费' }}
              </span>
            </div>
            <div class="detail-item">
              <span class="detail-label">发布时间：</span>
              <span>{{ formatDateTime(activity.publishTime) }}</span>
            </div>
          </div>
        </div>

        <!-- 右侧报名信息 -->
        <div class="activity-action">
          <div class="signup-info">
            <div class="signup-count">
              {{ activity.signupCount }}人报名
            </div>
            <div class="signup-limit">
              人数限制：{{ activity.limit }}人
            </div>
            <div class="contact-info">
              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                {{ activity.contactPhone }}
              </div>
              <div class="contact-item">
                <el-icon><User /></el-icon>
                {{ activity.contactPerson }}
              </div>
            </div>
          </div>

          <el-button
              class="signup-btn"
              :type="canSignup(activity) ? 'primary' : 'info'"
              :disabled="!canSignup(activity)"
              @click="handleSignup(activity)"
          >
            {{ canSignup(activity) ? '立即报名' : '报名截止' }}
          </el-button>
        </div>
      </div>

      <el-empty v-if="filteredActivities.length === 0" description="暂无相关活动" />
    </div>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="filteredActivities.length"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { Search, Picture, Phone, User } from '@element-plus/icons-vue';

// 原始活动数据
const rawActivities  = ref([
  {
    id: 301,
    title: '军事训练营',
    base: '国防教育基地',
    address: '学校操场',
    activityTime: '2025-09-10 08:00:00',
    deadline: '2025-09-05 18:00:00',
    target: '大一新生',
    isPaid: true,
    fee: 100,
    publishTime: '2025-08-25 09:00:00',
    image: 'https://images.unsplash.com/photo-1579403124614-197f69d8187b?w=600',
    signupCount: 250,
    limit: 300,
    contactPhone: '13800138301',
    contactPerson: '武装部'
  },
  {
    id: 302,
    title: '国防知识竞赛',
    base: '学术报告厅',
    address: '行政楼2楼',
    activityTime: '2025-09-15 19:00:00',
    deadline: '2025-09-12 18:00:00',
    target: '全体学生',
    isPaid: false,
    fee: 0,
    publishTime: '2025-09-01 14:00:00',
    image: 'https://pic1.zhimg.com/v2-bc5c336d5837b59519f188f38408e5b4_r.jpg?source=2c26e567',
    signupCount: 65,
    limit: 80,
    contactPhone: '13800138302',
    contactPerson: '国防协会'
  },
  {
    id: 303,
    title: '军事理论讲座',
    base: '军事理论教研室',
    address: '教学楼A101',
    activityTime: '2025-09-20 14:00:00',
    deadline: '2025-09-18 18:00:00',
    target: '全体学生',
    isPaid: false,
    fee: 0,
    publishTime: '2025-09-05 09:00:00',
    image: 'https://pic1.zhimg.com/v2-bc5c336d5837b59519f188f38408e5b4_r.jpg?source=2c26e567',
    signupCount: 120,
    limit: 150,
    contactPhone: '13800138303',
    contactPerson: '军事理论教研室'
  },
  {
    id: 304,
    title: '军营开放日',
    base: '某部队驻地',
    address: '某部队驻地',
    activityTime: '2025-09-25 08:00:00',
    deadline: '2025-09-20 18:00:00',
    target: '学生代表',
    isPaid: false,
    fee: 0,
    publishTime: '2025-09-10 14:00:00',
    image: 'https://images.unsplash.com/photo-1579403124614-197f69d8187b?w=600',
    signupCount: 50,
    limit: 60,
    contactPhone: '13800138304',
    contactPerson: '武装部'
  },
  {
    id: 305,
    title: '国防科技展',
    base: '科技馆',
    address: '校园科技馆',
    activityTime: '2025-10-01 09:00:00',
    deadline: '2025-09-28 18:00:00',
    target: '全体师生',
    isPaid: false,
    fee: 0,
    publishTime: '2025-09-15 09:00:00',
    image: 'https://pic1.zhimg.com/v2-bc5c336d5837b59519f188f38408e5b4_r.jpg?source=2c26e567',
    signupCount: 180,
    limit: 200,
    contactPhone: '13800138305',
    contactPerson: '科技协会'
  },
  {
    id: 306,
    title: '军事技能比赛',
    base: '国防教育基地',
    address: '学校操场',
    activityTime: '2025-10-05 08:00:00',
    deadline: '2025-10-02 18:00:00',
    target: '军训优秀学员',
    isPaid: false,
    fee: 0,
    publishTime: '2025-09-20 14:00:00',
    image: 'https://images.unsplash.com/photo-1579403124614-197f69d8187b?w=600',
    signupCount: 40,
    limit: 50,
    contactPhone: '13800138306',
    contactPerson: '武装部'
  },
  {
    id: 307,
    title: '国防电影展映',
    base: '学生活动中心',
    address: '学生活动中心影院',
    activityTime: '2025-10-10 19:00:00',
    deadline: '2025-10-08 18:00:00',
    target: '全体学生',
    isPaid: false,
    fee: 0,
    publishTime: '2025-09-25 09:00:00',
    image: 'https://pic1.zhimg.com/v2-bc5c336d5837b59519f188f38408e5b4_r.jpg?source=2c26e567',
    signupCount: 150,
    limit: 200,
    contactPhone: '13800138307',
    contactPerson: '学生会'
  },
  {
    id: 308,
    title: '军事模型制作',
    base: '手工制作室',
    address: '艺术楼B201',
    activityTime: '2025-10-15 14:00:00',
    deadline: '2025-10-12 18:00:00',
    target: '军事爱好者',
    isPaid: true,
    fee: 30,
    publishTime: '2025-09-30 14:00:00',
    image: 'https://images.unsplash.com/photo-1579403124614-197f69d8187b?w=600',
    signupCount: 35,
    limit: 40,
    contactPhone: '13800138308',
    contactPerson: '军事协会'
  },
  {
    id: 309,
    title: '国防教育征文',
    base: '文学院',
    address: '文学院办公室',
    activityTime: '2025-10-20 10:00:00',
    deadline: '2025-10-15 18:00:00',
    target: '全体学生',
    isPaid: false,
    fee: 0,
    publishTime: '2025-10-05 09:00:00',
    image: 'https://pic1.zhimg.com/v2-bc5c336d5837b59519f188f38408e5b4_r.jpg?source=2c26e567',
    signupCount: 80,
    limit: 100,
    contactPhone: '13800138309',
    contactPerson: '文学院'
  },
  {
    id: 310,
    title: '军事历史讲座',
    base: '历史学院',
    address: '历史学院报告厅',
    activityTime: '2025-10-25 14:00:00',
    deadline: '2025-10-22 18:00:00',
    target: '全体师生',
    isPaid: false,
    fee: 0,
    publishTime: '2025-10-10 14:00:00',
    image: 'https://images.unsplash.com/photo-1579403124614-197f69d8187b?w=600',
    signupCount: 90,
    limit: 120,
    contactPhone: '13800138310',
    contactPerson: '历史学院'
  }
]);

// 搜索和筛选
const searchQuery = ref('');
const filterBase = ref('');
const filterFee = ref('');

// 分页
const currentPage = ref(1);
const pageSize = ref(10);

// 计算属性
const uniqueBases = computed(() => {
  const bases = new Set(rawActivities.value.map(a => a.base));
  return Array.from(bases);
});

// 筛选后的活动
const filteredActivities = computed(() => {
  return rawActivities.value.filter(activity => {
    // 搜索条件
    const matchesSearch = searchQuery.value === '' ||
        activity.title.includes(searchQuery.value) ||
        activity.base.includes(searchQuery.value) ||
        activity.address.includes(searchQuery.value);

    // 基地筛选
    const matchesBase = filterBase.value === '' ||
        activity.base === filterBase.value;

    // 收费筛选
    const matchesFee = filterFee.value === '' ||
        (filterFee.value === 'free' && !activity.isPaid) ||
        (filterFee.value === 'paid' && activity.isPaid);

    return matchesSearch && matchesBase && matchesFee;
  });
});

// 分页后的活动
const paginatedActivities = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredActivities.value.slice(start, end);
});

// 方法
const handleSearch = () => {
  currentPage.value = 1; // 搜索后重置到第一页
};

const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
};

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
};

// 初始化数据（模拟API请求）
onMounted(async () => {
  // 这里可以替换为实际的API请求
  // const res = await api.getActivities();
  // rawActivities.value = res.data;
});

const formatDateTime = (datetime: string) => {
  if (!datetime) return '';
  const date = new Date(datetime);
  return `${date.getFullYear()}-${padZero(date.getMonth() + 1)}-${padZero(date.getDate())} ${padZero(date.getHours())}:${padZero(date.getMinutes())}`;
};

const padZero = (num: number) => {
  return num < 10 ? `0${num}` : num;
};

// 检查是否可以报名
const canSignup = (activity: any) => {
  const now = new Date();
  const deadline = new Date(activity.deadline);
  return now < deadline && activity.signupCount < activity.limit;
};

// 处理报名
const handleSignup = (activity: any) => {
  // 这里可以添加报名逻辑
  console.log('报名活动:', activity.title);
  ElMessage.success(`已成功报名【${activity.title}】`);
  activity.signupCount += 1;
};
</script>

<style scoped>
.labor-week {
  padding: 15px;
}

.labor-week h2 {
  font-size: 18px;
  color: var(--el-color-primary);
  margin-bottom: 20px;
  text-align: center;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.activity-item {
  display: flex;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.activity-image {
  width: 30%;
  height: 180px;
  background-color: #f5f7fa;
}

.image-content {
  width: 100%;
  height: 100%;
}

.image-error {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c0c4cc;
}

.activity-content {
  width: 50%;
  padding: 15px;
}

.activity-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.activity-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.detail-item {
  font-size: 13px;
  color: #606266;
  display: flex;
}

.detail-label {
  color: #909399;
  white-space: nowrap;
}

.free {
  color: var(--el-color-success);
}

.activity-action {
  width: 20%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid #eee;
}

.signup-info {
  margin-bottom: 10px;
}

.signup-count {
  font-size: 16px;
  color: var(--el-color-primary);
  margin-bottom: 5px;
}

.signup-limit {
  font-size: 12px;
  color: #909399;
  margin-bottom: 10px;
}

.contact-info {
  font-size: 12px;
  color: #606266;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.contact-item .el-icon {
  margin-right: 5px;
  font-size: 14px;
}

.signup-btn {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .activity-item {
    flex-direction: column;
  }

  .activity-image,
  .activity-content,
  .activity-action {
    width: 100%;
  }

  .activity-action {
    border-left: none;
    border-top: 1px solid #eee;
    padding-top: 15px;
  }
}
.labor-week {
  padding: 15px;
}

.labor-week h2 {
  font-size: 18px;
  color: var(--el-color-primary);
  margin-bottom: 20px;
  text-align: center;
}

/* 搜索区域 */
.search-area {
  margin-bottom: 20px;
}

.search-area .el-input {
  width: 400px;
  margin-right: 15px;
}

.search-filters {
  margin-top: 15px;
  display: flex;
  gap: 15px;
}

.search-filters .el-select {
  width: 200px;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 500px;
}

/* 分页 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-area .el-input {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .search-filters {
    flex-direction: column;
  }

  .search-filters .el-select {
    width: 100%;
  }
}

.search-area.single-line {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.search-area.single-line .search-input {
  width: 200px;
}

.search-area.single-line .base-select {
  width: 180px;
}

.search-area.single-line .fee-select {
  width: 120px;
}

.search-area.single-line .search-btn {
  margin-left: 5px;
}

/* 响应式设计 - 小屏幕下换行 */
@media (max-width: 992px) {
  .search-area.single-line {
    flex-wrap: wrap;
  }

  .search-area.single-line .search-input,
  .search-area.single-line .base-select,
  .search-area.single-line .fee-select {
    width: 100%;
  }

  .search-area.single-line .search-btn {
    width: 100%;
    margin-left: 0;
  }
}
</style>


